import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'

export default function useEditor() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('')
    const toolbarConfig = {}
    const editorConfig = { placeholder: '请输入内容...' }
    const mode = ref('default')
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })

    const handleCreated = (editor: any) => {
        editorRef.value = editor // 记录 editor 实例，重要！
    }
    return {
        editorRef,
        valueHtml,
        mode,
        toolbarConfig,
        editorConfig,
        handleCreated,
    }
}